/*
 * @Description: 
 * @Version: 2.0
 * @Author: cxc
 * @Date: 2022-03-30 10:57:09
 * @LastEditors: cxc
 * @LastEditTime: 2022-03-31 17:25:08
 */
import './EmployeeHeader.css'
import React, { useState } from 'react'
import { Row, Col, Space } from 'antd';
import { NavLink } from 'react-router-dom'

import {
  SettingOutlined,
  InfoCircleOutlined,
  UserOutlined,
  UserAddOutlined,
} from '@ant-design/icons';
import ComButton from '../ComButton';
import Search from '../Search';
import { btnColor, btnLinkColor, addBtnColor } from './../../../views/employee/color/employeeColor'
export default function EmployeeHeader(props) {
  const { handleShow } = props
  const btnList = [
    {
      id: 0,
      type: 'primary',
      btnName: '部门设置',
      to: '/employee/department',
      size: 'middle',
      BCcolor: btnLinkColor,
      icon: < SettingOutlined />,
      // handleClick: { toDepartment }
    },
    {
      id: 1,
      type: 'primary',
      btnName: '角色权限',
      size: 'middle',
      to: '/employee/roleAuthorization',
      BCcolor: btnColor,
      icon: < InfoCircleOutlined />,
      // handleClick: { toDepartment }
    },
    {
      id: 2,
      type: 'primary',
      btnName: '员工列表',
      size: 'middle',
      to: '/employee/employeesList',
      BCcolor: btnColor,
      icon: < UserOutlined />,
      // handleClick: { UserOutlined }
    },
    // {
    //   id: 3,
    //   type: 'primary',
    //   btnName: '新增员工',
    //   size: 'middle',
    //   to: '/employee/employeesList',
    //   BCcolor: addBtnColor,
    //   icon: < UserAddOutlined />,
    //   // handleClick: { toDepartment }
    // },
  ]
  function handleClick() { }

  return (
    <>
      {/* 头部 */}
      <Row >
        <Col span={16}>
          <Space size={1}>
            {
              btnList.map((item, index) => {
                return <NavLink key={item.id} to={item.to} className={({ isActive }) => {
                  return isActive ? 'active_link' : 'base_link'
                }}>
                  <Space size={3}>
                    {item.icon}
                    {item.btnName}
                  </Space>
                </NavLink>
              })
            }
            <ComButton type='primary' btnName='新增员工' size='middle' BCcolor={addBtnColor} icon={<UserAddOutlined />} handleClick={handleClick} />
          </Space>
        </Col>
        <Col span={8} className='search' >
          <Search handleShow={handleShow}></Search>
        </Col>
      </Row>
    </>
  )
}
